<template>
  <view class="page_content">
    <form-step :value="1"></form-step>
    <view class="business_title">油品信息</view>
    <view class="form_item">
      <view class="item_title">
        <text class="iconfont iconweibiaoti2010102 icon_size"></text>
        选择本站正在销售的油品
      </view>
      <view class="item_value">
        <view class="item_value_title">汽油</view>
        <view class="item_flex_value">
          <view class="flex_item" v-for="(item,index) in gasList" :key="index" :class="{'item_selected': item.select}" @tap="changeSelect(0,index)">
            <view class="angle" v-if="item.select"></view>
            <text class="iconfont iconduigou angle_icon"></text>
            <view class="item_name">{{item.name}}
              <text class="name_symbol">#</text>
            </view>
          </view>
        </view>
        <view class="item_value_title">柴油</view>
        <view class="item_flex_value">
          <view class="flex_item" v-for="(item,index) in dieselList" :key="index" :class="{'item_selected': item.select}" @tap="changeSelect(1,index)">
            <view class="angle" v-if="item.select"></view>
            <text class="iconfont iconduigou angle_icon"></text>
            <view class="item_name">{{item.name}}
              <text class="name_symbol">#</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="next_button" @tap="next()">下一步</view>
  </view>
</template>

<script>
import './business.scss';
import Taro from '@tarojs/taro';
import UserAPI from "../../api/user.js"
import FormStep from "../../components/formStep"
import { uploadFile } from "../../utils/uploadFile"
export default {
  components: {
    FormStep
  },
  data() {
    return {
      storeName: "",
      mobile: "",
      storePic: [],
      address: "",
      gasList: [
        {name: "92", select: false},
        {name: "95", select: true},
        {name: "98", select: false},
        {name: "89", select: false},
      ], // 汽油选项
      dieselList: [
        {name: "10", select: false},
        {name: "5", select: false},
        {name: "0", select: false},
        {name: "-10", select: false},
        {name: "-20", select: false},
        {name: "-35", select: false},
        {name: "-50", select: false},
      ], // 柴油选项
    }
  },
  mounted(){
  },
  methods: {
    inputStoreName(val){
      this.storeName = val;
    },
    inputMobile(val){
      this.mobile = val;
    },
    async onChangePic(files) { // 上传加油站罩棚照片
      if(files.length){
        this.showLoading = true;
        const res = await uploadFile(files[0]);
        if(res.code == 200){
          this.storePic = [{url: res.data.url}]
        }
        this.showLoading = false;
      }else{
        this.storePic = [];
      }
    },
    handleChangeAddress(val){
      this.address = val;
    },
    changeSelect(t,i){
      if(t === 0){
        this.gasList[i].select = !this.gasList[i].select
      }else{
        this.dieselList[i].select = !this.dieselList[i].select
      }
    },
    next(){
      Taro.navigateTo({
        url: "business2"
      })
    }
  }
}
</script>
